<!DOCTYPE HTML>
<html>
<title>留言板 — 一个站在java开发之路上的草根程序员个人博客网站</title>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<meta name="keywords" content="个人博客,三3三个人博客,个人博客系统,三3三博客">
<meta name="description" content="三3三博客系统，一个站在java开发之路上的草根程序员个人博客网站。">
<LINK rel="Bookmark" href="favicon.ico">
<LINK rel="Shortcut Icon" href="../../images/icon.jpg" />
<!--[if lt IE 9]>
<script type="text/javascript" src="/staticRes/js/html5shiv.js"></script>
<script type="text/javascript" src="/staticRes/js/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="plugin/h-ui/css/H-ui.min.css"/>
<link rel="stylesheet" type="text/css" href="plugin/Hui-iconfont/1.0.8/iconfont.min.css"/>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<link rel="stylesheet" type="text/css" href="plugin/pifu/pifu.css"/>
<link rel="stylesheet" type="text/css" href="plugin/wangEditor/css/wangEditor.min.css">
<!--[if lt IE 9]>
<link href="/staticRes/lib/h-ui/css/H-ui.ie.css" rel="stylesheet" type="text/css"/>
<![endif]-->
<script type="application/x-javascript"> addEventListener("load", function () {
    setTimeout(hideURLbar, 0);
}, false);

function hideURLbar() {
    window.scrollTo(0, 1);
}

function showSide() {
    $('.navbar-nav').toggle();
}</script>
</head>
<body>
<header class="navbar-wrapper">
    <div class="navbar navbar-fixed-top">
        <div class="container cl">
            <nav class="nav navbar-nav nav-collapse w_menu" role="navigation">
                <ul class="cl">
                    <li class="active"> <a href="/main.html" data-hover="主页面">主页面</a> </li>
                    <li class="active"><a href="/blog/list" data-hover="首页">首页</a></li>
                    <li><a href="about.html" data-hover="关于我">关于我</a></li>
                    <li><a href="mood.html" data-hover="碎言碎语">碎言碎语</a></li>
<!--                    <li><a href="article.html" data-hover="学无止尽">学无止尽</a></li>-->
                    <li><a href="board.html" data-hover="留言板">留言板</a></li>
                    <li> <a href="writing.html" data-hover="写博客">写博客</a> </li>
                    <li> <a href="myBlog.html" data-hover="我的博客">我的博客</a> </li>
                </ul>
            </nav>
            <nav class="navbar-nav navbar-userbar hidden-xs hidden-sm " style="top: 0;">
                <ul class="cl">
                    <li class="userInfo dropDown dropDown_hover">
                        <!--<a href="javascript:;" ><img class="avatar radius" src="img/40.jpg" alt="丶似浅 "></a>
                        <ul class="dropDown-menu menu radius box-shadow">
                            <li><a href="/app/loginOut">退出</a></li>
                        </ul>-->
                        <a href="../login.html" onclick="layer.msg('正在通过QQ登入', {icon:16, shade: 0.1, time:0})" ><img class="avatar size-S" src="img/qq.jpg" title="登入">退出</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</header>

<!--导航条-->
<nav class="breadcrumb">
    <div class="container"><i class="Hui-iconfont">&#xe67f;</i> <a href="blog.html" class="c-primary">首页</a> <span
            class="c-gray en">&gt;</span> <span class="c-gray">留言板</span></div>
</nav>

<section class="container">
    <div class="col-xs-12 col-md-10 col-md-offset-1 mt-20">
        <!--用于评论-->
        <div class="mt-20" id="ct">
            <div id="err" class="Huialert Huialert-danger hidden radius">成功状态提示</div>
            <textarea id="textarea1" name="comment" style="height:200px;" placeholder="看完不留一发？"> </textarea>
            <div class="text-r mt-10">
                <button onclick="getPlainTxt()" class="btn btn-primary radius"> 发表评论</button>
            </div>
        </div>

        <div class="line"></div>

        <ul class="commentList mt-50" id="commentbox">

<!--            <li class="item cl"><a href="#"><i class="avatar size-L radius"><img alt=""-->
<!--                                                                                 src="http://q.qlogo.cn/qqapp/101388738/1CF8425D24660DB8C3EBB76C03D95F35/100"></i></a>-->
<!--                <div class="comment-main">-->
<!--                    <header class="comment-header">-->
<!--                        <div class="comment-meta"><a class="comment-author" href="#">老王</a>-->
<!--                            <time title="2014年8月31日 下午3:20" datetime="2014-08-31T03:54:20" class="f-r">2014-8-31 15:20-->
<!--                            </time>-->
<!--                        </div>-->
<!--                    </header>-->
<!--                    <div class="comment-body">-->
<!--                        你是猴子派来的救兵吗？-->

<!--                        <ul class="commentList">-->
<!--                            <li class="item cl"><a href="#"><i class="avatar size-L radius"><img alt=""-->
<!--                                                                                                 src="http://qzapp.qlogo.cn/qzapp/101388738/1CF8425D24660DB8C3EBB76C03D95F35/100"></i></a>-->
<!--                                <div class="comment-main">-->
<!--                                    <header class="comment-header">-->
<!--                                        <div class="comment-meta"><a class="comment-author" href="#">老王</a>-->
<!--                                            <time title="2014年8月31日 下午3:20" datetime="2014-08-31T03:54:20" class="f-r">-->
<!--                                                2014-8-31 15:20-->
<!--                                            </time>-->
<!--                                        </div>-->
<!--                                    </header>-->
<!--                                    <div class="comment-body">-->
<!--                                        <p> 是的</p>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </li>-->
<!--                            <li class="item cl"><a href="#"><i class="avatar size-L radius"><img alt=""-->
<!--                                                                                                 src="http://qzapp.qlogo.cn/qzapp/101388738/696C8A17B3383B88804BA92ECBAA5D81/100"></i></a>-->
<!--                                <div class="comment-main">-->
<!--                                    <header class="comment-header">-->
<!--                                        <div class="comment-meta"><a class="comment-author" href="#">老王</a>-->
<!--                                            <time title="2014年8月31日 下午3:20" datetime="2014-08-31T03:54:20" class="f-r">-->
<!--                                                2014-8-31 15:20-->
<!--                                            </time>-->
<!--                                        </div>-->
<!--                                    </header>-->
<!--                                    <div class="comment-body">-->
<!--                                        <p> +1</p>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </li>-->

<!--                        </ul>-->

<!--                        <button class="hf f-r btn btn-default size-S mt-10" name="2">回复</button>-->

<!--                    </div>-->
<!--                </div>-->
<!--            </li>-->
<!--            <li class="item cl"><a href="#"><i class="avatar size-L radius"><img alt=""-->
<!--                                                                                 src="http://qzapp.qlogo.cn/qzapp/101388738/1CF8425D24660DB8C3EBB76C03D95F35/100"></i></a>-->
<!--                <div class="comment-main">-->
<!--                    <header class="comment-header">-->
<!--                        <div class="comment-meta"><a class="comment-author" href="#">老王</a>-->
<!--                            <time title="2014年8月31日 下午3:20" datetime="2014-08-31T03:54:20" class="f-r">2014-8-31 15:20-->
<!--                            </time>-->
<!--                        </div>-->
<!--                    </header>-->
<!--                    <div class="comment-body">-->
<!--                        你是猴子派来的救兵吗？-->

<!--                        <button class="hf f-r btn btn-default size-S mt-10" name="3">回复</button>-->

<!--                    </div>-->
<!--                </div>-->
<!--            </li>-->

        </ul>
        <!--用于回复-->
        <div class="comment hidden mt-20">
            <div id="err2" class="Huialert Huialert-danger hidden radius">成功状态提示</div>
            <textarea id="textarea3" class="textarea" style="height:100px;"> </textarea>
            <input id="replyId" type="hidden" value="">
            <button onclick="getPlainTxt2()" type="button" class="btn btn-primary radius mt-10">回复</button>
            <a class="cancelReply f-r mt-10">取消回复</a>
        </div>

    </div>
</section>
<footer class="footer mt-20">
    <div class="container-fluid" id="foot">
        <p>Copyright &copy; 2020-2021 www.333blog.top <br>
<!--            <a href="#" target="_blank">皖ICP备17002922号</a> 更多模板：<a href="http://www.mycodes.net/"-->
<!--                                                                   target="_blank">源码之家</a><br>-->
        </p>
    </div>
</footer>
<script type="text/javascript" src="plugin/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="plugin/layer/3.0/layer.js"></script>
<script type="text/javascript" src="plugin/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="plugin/pifu/pifu.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script> $(function () {
    $(window).on("scroll", backToTopFun);
    backToTopFun();
}); </script>
<script type="text/javascript" src="plugin/wangEditor/js/wangEditor.min.js"></script>

<script type="text/javascript">

    $(function () {

        $.ajaxSettings.async = false;//取消异步
        $.getJSON("/remark/list", function (data) {
            //console.log(data);
            if (data.length > 0) {
                $("#commentbox").empty();//清空html内容
            }
            $.each(data, function (a,data) {
                $.each(data, function (i, value) {
                    if (value.rrId == 0) {
                        $("#commentbox").append('<li  class="item cl"> <a href="#"><i class="avatar size-L radius"><img alt="" src="http://q.qlogo.cn/qqapp/101388738/1CF8425D24660DB8C3EBB76C03D95F35/100">' +
                            '</i></a><div class="comment-main"><header class="comment-header"><div class="comment-meta"><input type="hidden" id="remarkId'+i+'" value="'+value.id+'"><a class="comment-author">' + value.username +
                            '</a><time class="f-r">' + value.rdate + '</time></div></header><div class="comment-body">' + value.content + '<ul id="'+value.id+'" class="commentList">' +
                            '</ul><button class="hf f-r btn btn-default size-S mt-10" id="test" name="'+value.id+'">回复</button></div></div></li>');
                    } else {
                        var ulId = data[0].id;
                        $("#"+ulId).append('<li class="item cl"><a href="#"><i class="avatar size-L radius"><img src="http://qzapp.qlogo.cn/qzapp/101388738/1CF8425D24660DB8C3EBB76C03D95F35/100"></i></a>' +
                            '<div class="comment-main"><header class="comment-header"><div class="comment-meta"> <a class="comment-author" href="#">' + value.username + ' </a>' +
                            '<time class="f-r">' + value.rdate + '</time></div></header><div class="comment-body"><p>' + value.content + '</p></div></div></li>');
                    }
                })
            })
        });

        wangEditor.config.printLog = false;
        var editor1 = new wangEditor('textarea1');
        editor1.config.menus = ['insertcode', 'quote', 'bold', '|', 'img', 'emotion', '|', 'undo', 'fullscreen'];
        editor1.config.emotions = {
            'default': {title: '表情', data: 'plugin/wangEditor/emotions1.data'},
            'default2': {title: '心情', data: 'plugin/wangEditor/emotions3.data'},
            'default3': {title: '顶一顶', data: 'plugin/wangEditor/emotions2.data'}
        };
        editor1.create();

        //show reply
        $(".hf").click(function () {
            // var butId = $("#test").attr('name');
            $("#replyId").val(this.name);
            $(this).parents(".commentList").find(".cancelReply").trigger("click");
            $(this).parent(".comment-body").append($(".comment").clone(true));
            $(this).parent(".comment-body").find(".comment").removeClass("hidden");
            $(this).hide();
        });
        //cancel reply
        $(".cancelReply").on('click', function () {
            $(this).parents(".comment-body").find(".hf").show();
            $(this).parents(".comment-body").find(".comment").remove();
        });

    });

    function getPlainTxt() {
        var text = $("#textarea1").val();
        var rrId = 0;
        // text = text.replace(/\s+/g, "");//先去除空格
        if (text == null || text == "" || text.length <= 1) {
            alert("评论不能为空！");
            return;
        }
        $.ajax({
            type:"POST",
            url:"/remark/save",
            data:{"content":text,"rrId":rrId,"blogId":0},
            success: function (data) {
                if (data.code == 200){
                    alert("发表成功！");
                    window.location.href="/templates/blog/board.html";
                }
                if (data.error != null){
                    alert(data.data);
                }
            }
        })
    }

    function getPlainTxt2() {
        var text = $("#textarea3").val();
        var rrId = $("#replyId").val();
        text = text.replace(/\s+/g, "");//先去除空格
        if(text == null || text == "" || text.length <= 1 ){
            alert("评论不能为空！");
            return;
        }
        $.ajax({
            type:"POST",
            url:"/remark/save",
            data:{"content":text,"rrId":rrId,"blogId":0},
            success: function (data) {
                if (data.code == 200){
                    alert("发表成功！");
                    window.location.href="/templates/blog/board.html";
                }else{
                    alert(data.data);
                }
            }
        })

    }

</script>

</body>
</html>
